<script>
import {getSub, loginUser, passwordLogin} from "@/api/login";

export default {
  name: "headerPage",
  data() {
    return {
      subList: '',
      formIogin: {
        password: '',
        username: '',
        rememberMe: false,
        memberRegistrationLinkCode: null
      },
      activeName: 'first',
      dialogVisible: false
    }
  },
  created() {

  },
  mounted() {
    this.getInfo()
    this.getSublist()
  },
  methods: {
    // 跳转搜索页面 goSearchpage
    goSearchpage(subjectId) {
      console.log(111)
      this.$router.push({
        path: '/searchPage',
        query: {
          keyword: '',
          type: '',
          subjectId: subjectId,
          courseType: null
          // pageNum: 1,
          // pageSize: 15
        }
      })
    },
    getSublist() {
      getSub({enable: 1}).then(res => {
        console.log('sub', res)
        this.subList = res.rows
      })
    },
    // 跳转one页面
    goOnepage() {
      console.log('111')
      this.$router.push({
        path: '/userPage/one'
      })
    },
    getInfo() {
      loginUser().then(res => {

        if (res.code === 0) {
          this.$store.state.isLogin = true
          this.$store.state.userInfolist = res.data
        } else {
          this.$store.state.isLogin = false
        }

      })
    },
    onSubmit() {
      passwordLogin(this.formIogin).then(res => {
        console.log(res)
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    loginBtn() {
      this.dialogVisible = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {

          });
    }
  }
}
</script>

<template>
  <div>
    <header>
      <main>
        <!--logo-->
        <div class="logo-box">
          <img src="https://course.myhope365.com/img/logo-text-green.2137bfaa.png" alt="" srcset="">
        </div>
        <!--nav-->
        <div class="nav-box">
          <ul>
            <li>首页</li>
            <li>
              <el-dropdown>
                <span class="el-dropdown-link">
                课程分类
                <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in subList" :key="item.subjectId">
                    <div @click="goSearchpage(item.subjectId)"> {{ item.subjectTitle }}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li>教学管理云平台</li>
          </ul>
        </div>
        <!--search-->
        <div>

        </div>
        <!--login-->
        <div class="login-box">
          <el-button @click="loginBtn" round style="font-weight: 700" v-if="this.$store.state.isLogin === false">
            登录/注册
          </el-button>
          <div v-else>
            <!--          -->
            <el-dropdown>
  <span class="el-dropdown-link">
      {{ this.$store.state.userInfolist.nickname }}
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div @click="goOnepage">个人中心</div>
                </el-dropdown-item>
                <el-dropdown-item>我的课程</el-dropdown-item>
                <el-dropdown-item>我的订单</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </main>
    </header>
    <!--  弹出框-->
    <div class="dialog-box">
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="普通登录" name="first">
            <el-form :inline="true" :model="formIogin" class="demo-form-inline">
              <el-form-item label="用户名">
                <el-input v-model="formIogin.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="formIogin.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="手机号登录" name="second">手机号登录</el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>

</template>

<style scoped lang="less">
.login-box {

}

.el-dropdown-link {
  cursor: pointer;
  //color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

header {
  width: 100%;
  background-color: white;
  height: 80px;

  main {
    justify-content: space-between;
    margin: 0 auto;
    display: flex;
    width: 1160px;
  }
}

.nav-box {
  height: 30px;
  font-weight: 600;

  ul {
    display: flex;

    li {
      margin-left: 20px;
    }
  }
}
</style>
